<template>
  <div class="wrapper">
    <div class="sub_title lr_nav_bot_bd">
      <div style="height: var(--lr_status_height);"></div>
      <div class="tit_txt">
        <div class="ic icl">
          <i style="font-size: 22rem; font-weight: 400;margin-left: 1.5vw;" class="iconfont lricon-zhuti"></i>
        </div>
        <div>(六壬起个课APP-排盘)</div>
        <div @click.stop="goRiLi" class="ic icr"><i style="font-size: 21rem;margin-right: 1.5vw;"
            class="iconfont lricon-rili1"></i></div>
      </div>
    </div>
    <div class="wrapper-mid">
      <div class="option_table">
        <div class="table_tit">排盘选项</div>
        <div class="qike_option">
          <div class="qikeyuejiang option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-taiyang icon-i"></i>
                </div>
                当前月将:
              </div>
              <div class="item_right">
                <div :class="{ select: yueJiangType == 'zx' }" @click="
                  () => {
                    yueJiangType = 'zx';
                    showSlcYueJiang = true;
                  }
                " style="margin-right: 0">
                  {{ slcYueJiangBtnTxt }}
                </div>
                <div :class="{ select: yueJiangType == 'zq' }" @click="
                  () => {
                    yueJiangType = 'zq';
                    showSlcYueJiang = false;
                    slcYueJiangBtnTxt = '自选月将';
                  }
                ">
                  中气换将
                </div>
              </div>
            </div>
          </div>
          <div class="qikefangfa option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-fangfa icon-i" style="font-size: 16rem"></i>
                </div>
                涉害方法:
              </div>
              <div class="item_right">
                <div :class="{ select: sheHaiType == 'mzj' }" @click="sheHaiType = 'mzj'" style="margin-right: 0">
                  孟仲季
                </div>
                <div :class="{ select: sheHaiType == 'sh' }" @click="sheHaiType = 'sh'">
                  涉害
                </div>
              </div>
            </div>
          </div>
          <div class="qikefangfa option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-leixing icon-i" style="font-size: 15rem"></i>
                </div>
                贵人方法:
              </div>
              <div class="item_right">
                <div :class="{ select: guishenType == 'jyw' }" @click="guishenType = 'jyw'" style="margin-right: 0">
                  甲羊戊
                </div>
                <div :class="{ select: guishenType == 'jwg' }" @click="guishenType = 'jwg'">
                  甲戊庚
                </div>
              </div>
            </div>
          </div>
          <div class="qikeriqi option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-riqi icon-i" style="font-size: 16rem"></i>
                </div>
                起课日期:
              </div>
              <div class="item_right">
                <div @click="showDateTimePicker = true" class="input">
                  <div class="input_v">
                    {{
                      currentYearMonthDay[0] +
                      "/" +
                      currentYearMonthDay[1] +
                      "/" +
                      currentYearMonthDay[2] +
                      " " +
                      currentHourMinute[0] +
                      ":" +
                      currentHourMinute[1]
                    }}
                  </div>
                  <!-- <input type="text"> -->
                </div>
              </div>
            </div>
          </div>
          <div class="qikenianming option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-nianling icon-i"></i>
                </div>
                占课年命:
              </div>
              <div class="item_right">
                <div class="input">
                  <div @click="showBirth = true" class="input_v">
                    {{ birthDate[0] + "-" + birthDate[1] + "-" + birthDate[2] }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="qikehuoshi option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-shijian icon-i" style="font-size: 16rem"></i>
                </div>
                占时选择:
              </div>
              <div class="item_right">
                <div :class="{ select: hourType == 'hs' }" @click="() => {
                  hourType = 'hs';
                  showHuoShi = true
                }" style="margin-right: 0">
                  {{ slcHuoShiBtnTxt }}
                </div>
                <div :class="{ select: hourType == 'zs' }" @click="() => {
                  hourType = 'zs';
                  showHuoShi = false
                }">
                  正时
                </div>
              </div>
            </div>
            <div class="option-item-bot">
            </div>
          </div>
          <div class="qikeguishen option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-zhouye icon-i"></i>
                </div>
                昼夜贵人:
              </div>
              <div class="item_right">
                <div :class="{ select: zhouyeGui == 'zhou' }" @click="zhouyeGui = 'zhou'" style="margin-right: 0">
                  昼贵
                </div>
                <div :class="{ select: zhouyeGui == 'ye' }" @click="zhouyeGui = 'ye'">
                  夜贵
                </div>
                <div :class="{ select: zhouyeGui == 'auto' }" @click="zhouyeGui = 'auto'">
                  自动
                </div>
              </div>
            </div>
          </div>
          <div class="qikeguishen option-item">
            <div class="option-item-top">
              <div class="item_left">
                <div class="i_b">
                  <i class="iconfont lricon-niantie icon-i"></i>
                </div>
                分享复制:
              </div>
              <div class="item_right">
                <div class="input">
                  <div class="input_v"></div>
                  <!-- <input type="text"> -->
                </div>
              </div>
            </div>
          </div>
          <div class="qikeguishen option-item" style="border: none">
            <VanButton style="border-radius: 6rem; margin-top: 0rem; margin-bottom: 10rem" @click="getQikecords"
              class="queren but" square type="default">起课记录
            </VanButton>
          </div>
        </div>
      </div>
      <VanButton style="background-color: var(--cart_bg_color); margin-top: 20rem;color: white;" @click="goQiKePage"
        class="queren but" square type="default">
        开始起课
      </VanButton>
    </div>


    <VanOverlay :lazy-render="false" :show="showDateTimePicker" @click="showDateTimePicker = false">
      <div class="wrapper_overlay">
        <transition name="van-slide-down">
          <div @click="
            (event) => {
              event.stopPropagation();
            }
          " class="datetime_picker" v-show="showDateTimePicker">
            <div class="picker_top">
              <!-- 公元{{ qiKeDatetime.gongliDate }}<br /> -->
              农历{{ qiKeDatetime.yingLiDate }}
            </div>
            <div class="picker_mid" style="
                display: flex;
                justify-content: center;
                align-items: center;
                height: fit-content;
                width: 90vw;
              ">
              <!-- <DatePicker :show-toolbar="false" class="picker_input" v-model="currentYearMonthDay"
                visible-option-num="5" style="width: calc(54vw - 0.3rem); border-right: 0.3rem solid #ccc;"
                :columns-type="['year', 'month', 'day']" title="选择完整时间" :min-date="minDate" :max-date="maxDate" />
              <TimePicker :show-toolbar="false" class="picker_input" v-model="currentHourMinute" visible-option-num="5"
                style="width: 36vw;border: none;" :columns-type="['hour', 'minute']" title="选择时间" /> -->

              <DatetimePicker class="picker_input" style="width: 90vw" v-model="qiKeDatetime.currentDate"
                type="datetime" title="选择年月日" :formatter="zidingyiFormatterDatetime" visible-item-count="5"
                :min-date="minDate" :max-date="maxDate" :show-toolbar="false" @change="changeQiKeDatetime">
              </DatetimePicker>
            </div>
            <div class="fenggexian"></div>
            <div class="picker_bot">
              <VanButton class="quxiao but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="oncancelDatetime">取消
              </VanButton>
              <div class="zhonggexian"></div>
              <VanButton class="quren but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="onConfirmDatetime">确认
              </VanButton>
            </div>
          </div>
        </transition>
      </div>
    </VanOverlay>
    <VanOverlay :lazy-render="false" :show="showSlcYueJiang" @click="showSlcYueJiang = false">
      <div class="wrapper_overlay">
        <transition name="van-slide-down">
          <div @click="
            (event) => {
              event.stopPropagation();
            }
          " class="datetime_picker" v-show="showSlcYueJiang">
            <div class="picker_top">
              {{ slcYueJiangBtnTxt }}
            </div>
            <div class="picker_mid" style="
                display: flex;
                justify-content: center;
                align-items: center;
                height: fit-content;
                width: 90vw;
              ">
              <VanPicker v-model="slcYueJiang" visible-option-num="5" :show-toolbar="false" confirm-button-text=""
                cancel-button-text="" :columns="columnsYuejiang" style="width: 90vw">
              </VanPicker>
            </div>
            <div class="fenggexian"></div>
            <div class="picker_bot">
              <VanButton class="quxiao but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="
                  () => {
                    showSlcYueJiang = false;
                    (yueJiangType = 'zq'), (slcYueJiangBtnTxt = '自选月将');
                  }
                ">取消
              </VanButton>
              <div class="zhonggexian"></div>
              <VanButton class="quren but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="onConfirmYuejiang">确认
              </VanButton>
            </div>
          </div>
        </transition>
      </div>
    </VanOverlay>
    <VanOverlay :lazy-render="false" :show="showBirth" @click="showBirth = false">
      <div class="wrapper_overlay">
        <transition name="van-slide-down">
          <div @click="
            (event) => {
              event.stopPropagation();
            }
          " class="datetime_picker" v-show="showBirth">
            <div class="picker_top" @click="
              (event) => {
                event.stopPropagation();
              }
            ">
              添加年命
            </div>
            <div class="picker_bot" style="border: none">
              <div class="gender_wrapper" style="width: 60vw; border: 2rem solid var(--cart_bg_color)">
                <div @click="gender = '男'" :class="{ genderSelect: gender == '男' }" class="female">
                  男生
                </div>
                <div @click="gender = '女'" :class="{ genderSelect: gender == '女' }" class="male">
                  女生
                </div>
              </div>
            </div>
            <div class="fenggexian"></div>
            <div class="picker_mid" style="
                display: flex;
                justify-content: center;
                align-items: center;
                height: fit-content;
                width: 90vw;
                border-top: 0;
              ">
              <DatePicker v-model="birthDate" visible-option-num="3" :show-toolbar="false" confirm-button-text=""
                :formatter="zdyFormatterBirthDate" :min-date="minDate" :max-date="maxDate" cancel-button-text=""
                style="width: 90vw">
              </DatePicker>
            </div>
            <div class="fenggexian"></div>
            <div class="picker_bot">
              <VanButton class="quxiao but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="
                  () => {
                    showBirth = false;
                    birthDate[0] = '2001';
                    birthDate[1] = '01';
                    birthDate[2] = '01'
                  }
                ">取消
              </VanButton>
              <div class="zhonggexian"></div>
              <VanButton class="quren but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="() => {
                  showBirth = false;
                  nianming = {
                    gender: gender,
                    birth: birthDate
                  }
                }">确认
              </VanButton>
            </div>
          </div>
        </transition>
      </div>
    </VanOverlay>
    <VanOverlay :lazy-render="false" :show="showHuoShi" @click="showHuoShi = false">
      <div class="wrapper_overlay">
        <transition name="van-slide-down">
          <div @click="
            (event) => {
              event.stopPropagation();
            }
          " class="datetime_picker" v-show="showHuoShi">
            <div class="picker_top">
              当前选择:{{ slcHuoShi[0] }}时
            </div>
            <div class="picker_mid" style="
                display: flex;
                justify-content: center;
                align-items: center;
                height: fit-content;
                width: 90vw;
              ">
              <VanPicker v-model="slcHuoShi" visible-option-num="5" :show-toolbar="false" confirm-button-text=""
                cancel-button-text="" :columns="columnsHour" style="width: 90vw">
              </VanPicker>
            </div>
            <div class="fenggexian"></div>
            <div class="picker_bot">
              <VanButton class="quxiao but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="
                  () => {
                    showHuoShi = false;
                    (hourType = 'zs'), (slcHuoShiBtnTxt = '自选时辰');
                  }
                ">取消
              </VanButton>
              <div class="zhonggexian"></div>
              <VanButton class="quren but" style="width: 45vw; height: 40rem; border: none" square type="default"
                @click="() => {
                  showHuoShi = false;
                  slcHuoShiBtnTxt = '选择' + slcHuoShi[0] + '时'
                }">确认
              </VanButton>
            </div>
          </div>
        </transition>
      </div>
    </VanOverlay>
    <van-popup :lock-scroll="false" v-model:show="showQikecord" round position="bottom" :style="{ height: '60vh' }">
      <div class="search_cord">
        <div class="tit">
          <div class="btn"></div>
          <div>起课记录</div>
          <div @click="showQikecord = false" class="btn">关闭</div>
        </div>
        <div class="content">
          <div v-for="(item, index) in qikeCords">
            <van-swipe-cell :disabled="false">
              <div @click="qikeBycord(item.sj)" class="cord_box">
                <div class="box_r">
                  {{ item.guaZhu[0] }}
                </div>
                <div class="box_m">
                  <div class="m_top"><span>{{ item.guaZhu }}</span><span>{{ item.zhanShi }}</span></div>
                  <div class="m_bot"><span>{{ item.sj }}</span><span>{{ item.fanKui }}</span></div>
                </div>
              </div>
              <template #right>
                <div class="swcr">
                  <i  style="font-size: 18rem;" class="iconfont lricon-shanchu1"></i>
                </div>
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { DatePicker, TimePicker, Button, FloatingPanel, Overlay, Picker, Popup, SwipeCell } from "vant";
import { formatPickerDate, zidingyiFormatDatetime } from "../api/dateUtils";
import dayjs from "dayjs";
import { onBackKeyDown } from "tauri-plugin-app-events-api";
import { findYueJiangByName, findYueJiangByValue, YueJiang } from "../api/yuejiang";
import {
  columnsHour,
  columnsYuejiang,
  formatToChineseDateTime,
  formatterBirthDate,
} from "../api/paipanotion";
import { useQiKeDateStore } from "../store";
import { DatetimePicker } from "vant3";
import qikeDateOption, { getQiKeDateOption, getYmdHmsByDate } from "../api/qikeDateOption";
import { dipan } from "../api/paipan";
import { event } from "@tauri-apps/api";
import { addQikecord, getLiurenkeBysj, selectAllqikecord } from "../api/dbUtils";
export default {
  name: "Test",
  components: {
    DatePicker,
    TimePicker,
    VanButton: Button,
    FloatingPanel,
    VanOverlay: Overlay,
    DatetimePicker,
    VanPicker: Picker,
    VanPopup: Popup,
    VanSwipeCell: SwipeCell
  },
  data() {
    return {
      d: "",
      currentYueJiang: null,
      tianPan: [],
      currentYearMonthDay: null,
      currentHourMinute: null,
      minDate: new Date(1600, 0, 1),
      maxDate: new Date(2225, 10, 1),
      gender: "男",
      qiKeDatetime: {
        currentDate: null,
        slcDate: null,
        gongliDate: null,
        yingLiDate: null,
      },
      showDateTimePicker: false,
      showBirth: false,
      showHuoShi: false,
      slcYueJiang: ["午"],
      slcHuoShi: ['子'],
      showSlcYueJiang: false,
      slcYueJiangBtnTxt: "自选月将",
      slcHuoShiBtnTxt: '自选时辰',
      slcHour: null,
      yueJiangType: "zq",
      sheHaiType: "sh",
      hourType: "zs",
      zhouyeGui: "auto",
      guishenType: "jwg",
      birthDate: ["2001", "01", "01"],
      showSlcYuejiang: false,
      zidingyiFormatterDatetime: zidingyiFormatDatetime,
      zdyFormatterBirthDate: formatterBirthDate,
      qiKeDateStore: useQiKeDateStore(),
      columnsYuejiang: columnsYuejiang,
      columnsHour: columnsHour,
      nianming: {
        gender: "男",
        birth: ["2001", "01", "01"]
      },
      showQikecord: false,
      qikeCords: []
    };
  },
  created() {
    // let s = "甲子-子-子"
    // this.tianPan = dipan
    // alert(sanchuan[s]);

    this.initDatetime();
    let dateObj = formatPickerDate(this.qiKeDatetime.slcDate);
    this.currentYearMonthDay = dateObj.yearMonthDay;
    this.currentHourMinute = dateObj.hourMinute;
  },

  props: {},
  methods: {
    async getQikecords() {
      this.showQikecord = true
         let acs = await selectAllqikecord()
   this.qikeCords = [...acs]
    },
    async goQiKePage() {
      // const date = dayjs(
      //   `${this.currentYearMonthDay[0]}-${this.currentYearMonthDay[1]}-
      // ${this.currentYearMonthDay[2]} ${this.currentHourMinute[0]}:${this.currentHourMinute[1]}:${this.currentHourMinute[2]}`,
      //   "YYYY-MM-DD HH:mm:ss"
      // ).toDate();
      await addQikecord(getYmdHmsByDate(this.qiKeDatetime.slcDate))
      let qiKeDatetimeOption = getQiKeDateOption(
        this.slcYueJiang[0],
        this.yueJiangType,
        this.sheHaiType,
        this.guishenType,
        this.qiKeDatetime.slcDate,
        this.nianming,
        this.slcHuoShi[0],
        this.hourType,
        this.zhouyeGui,
      );
      console.log("起课参数");

      console.log(qiKeDatetimeOption);
      this.qiKeDateStore.upDateQiKeDatetimeOption(qiKeDatetimeOption);
      this.$router.push("/paipan");
    },
    changeQiKeDatetime(date) {
      this.qiKeDatetime.gongliDate = formatToChineseDateTime(date).gongliDate;
      this.qiKeDatetime.yingLiDate = formatToChineseDateTime(date).yingliDate;
      let dateObj = formatPickerDate(date);
      this.currentYearMonthDay = dateObj.yearMonthDay;
      this.currentHourMinute = dateObj.hourMinute;
    },
    r() {
      location.reload(true);
      // const store = await getStore('data.json');
      // console.dir(store)
      // alert(JSON.stringify(store))
      // console.log(store)
    },

    onConfirmYuejiang() {
      let yueJiang = findYueJiangByValue(this.slcYueJiang[0]);
      this.slcYueJiangBtnTxt = yueJiang.name + yueJiang.value + "将";
      this.showSlcYueJiang = false;
    },
    onConfirmDatetime() {
      this.showDateTimePicker = false;
      this.qiKeDatetime.slcDate = this.qiKeDatetime.currentDate;
    },
    oncancelDatetime() {
      this.showDateTimePicker = false;
      this.qiKeDatetime.currentDate = this.qiKeDatetime.slcDate;
      let dateObj = formatPickerDate(this.qiKeDatetime.slcDate);
      this.currentYearMonthDay = dateObj.yearMonthDay;
      this.currentHourMinute = dateObj.hourMinute;
    },
    initDatetime() {
      let date = new Date();
      this.qiKeDatetime.currentDate = date;
      this.qiKeDatetime.slcDate = date;
      this.qiKeDatetime.gongliDate = formatToChineseDateTime(date).gongliDate;
      this.qiKeDatetime.yingLiDate = formatToChineseDateTime(date).yingliDate;
    },
    goRiLi() {
      this.$router.push('/rili')
    },
    async qikeBycord(sj) {
      let qkopt = await getLiurenkeBysj(sj)
      alert(JSON.stringify(qkopt))
     this.qiKeDateStore.upDateQiKeDatetimeOption(qkopt);
      this.$router.push("/paipan");
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  // height: calc(100vh - 53p);
  height: 100vh;
  margin: 0;
  padding: 0;
  //  background-color: #ffffff;

  .wrapper_overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 999;

    .datetime_picker {
      // border: 0.2rem solid #ccc;
      border-radius: 4rem;
      overflow: hidden;
      width: 90vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;

      .picker_top {
        width: 90vw;
        height: 40;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 40rem;
        color: #ffffff;
        font-size: 16rem;
        font-weight: bold;
        background-color: var(--cart_bg_color);
      }

      .fenggexian {
        height: 0.8rem;
        width: 80vw;
        background: #e8e8e8;
      }

      .picker_bot {
        color: #867f7f;
        display: flex;
        height: 40rem;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 0 0 4rem 4rem;
        // border-bottom: 0.2rem solid #ccc;
        // border-right: 0.2rem solid #ccc;
        // border-left: 0.2rem solid #ccc;
        font-size: 16rem;
        font-weight: bold;

        .gender_wrapper {
          display: flex;
          height: 24rem;
          overflow: hidden;
          border-radius: 4rem;

          div {
            width: 30vw;
            height: 24rem;
            color: var(--cart_bg_color);
            line-height: 24rem;
            text-align: center;
          }

          .genderSelect {
            background-color: var(--cart_bg_color);
            color: #ffffff;
          }
        }

        .but {
          font-size: 16rem;
          font-weight: bold;
          color: rgb(0, 0, 0);
          letter-spacing: 2rem;
        }

        .zhonggexian {
          height: 32rem;
          width: 0.8rem;
          background-color: #e8e8e8;
        }
      }

      .picker_mid {
        border-top: 0.4rem solid #ccc;
        overflow: hidden;

        ::v-deep(.van-picker-column__item--selected) {
          text-decoration: none;
          // background-color: #de2323;
          overflow: hidden;
        }

        ::v-deep(.van-picker-column__item) {
          text-decoration: none;
          // border-top: none;
          // border-bottom: none;
          // background-color: #de2323;
          overflow: hidden;
        }

        ::v-deep(.van-ellipsis) {
          text-decoration: none;
          border-top: none;
          border-bottom: none;
          overflow: hidden;
          // background-color: #de2323;
        }
      }
    }
  }

  .wrapper-mid {
    height: calc(100vh - 85rem);
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: fit-content;
    align-items: center;

    .option_table {
      margin-top: -54rem;
      height: fit-content;
      display: flex;
      width: 94vw;
      flex-direction: column;
      background-color: var(--lr_lbgc);
      background-color: whitesmoke;
      // border: 2rem solid #efefef;
      border: 2rem solid var(--cart_bg_color);
      border-radius: 6rem;
      overflow: hidden;
      max-height: 70vh;
      overflow: scroll;

      .table_tit {
        width: 100%;
        height: 40rem;
        // background-color: #73524b;
        color: #000000;
        line-height: 40rem;
        text-align: center;
        font-size: 17rem;
        border-bottom: 2rem solid var(--lr_lcbgc);
        border-bottom: 2rem solid var(--cart_bg_color);
        font-weight: bold;
        align-items: center;
      }

      .qike_option {
        width: 94vw;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;

        .option-item {
          width: 88vw;
          margin-top: 10rem;
          height: fit-content;
          min-height: 40rem;
          border-bottom: 2rem solid var(--cart_bg_color);

          .option-item-top {
            width: 88vw;
            height: fit-content;
            min-height: 40rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .item_left {
              font-size: 15rem;
              width: fit-content;
              display: flex;
              font-weight: bold;
              align-items: center;

              .i_b {
                width: 22rem;
                height: 26rem;
                line-height: 26rem;
                // background-color: #693939;
                justify-content: center;
                align-items: center;
                text-align: center;

                .icon-i {
                  color: #E91E63;
                  font-size: 18rem;
                }
              }
            }

            .item_right {
              flex-grow: 1;
              display: flex;
              align-items: center;
              flex-direction: row-reverse;

              .input {
                margin: 0;
                padding: 0;
                border: none;
                display: flex;
                align-items: center;
                flex-direction: row-reverse;

                // background-color: #2d1414;
                .sex {
                  letter-spacing: 2rem;
                  height: fit-content;
                  width: fit-content;
                  color: #ffffff;
                  background-color: var(--cart_bg_color);
                  font-size: 12rem;
                  // line-height: 22rem;
                  // border-radius: 3rem;
                }

                .input_v {
                  text-align: center;
                  margin-right: 0;
                  width: fit-content;
                  min-width: 49vw;
                  // max-width: 55vw;
                  list-style: none;
                  border: none;
                  background-color: var(--lr_lcbgc);
                  color: black;
                  outline: none;
                  height: 22rem;
                  font-size: 14rem;
                  line-height: 22rem;
                  border-radius: 3rem;
                }
              }

              .select {
                color: #ffffff;
                background-color: var(--cart_bg_color);
              }

              div {
                background-color: var(--lr_lcbgc);
                margin-right: 10rem;
                border: 2rem solid var(--cart_bg_color);
                font-size: 12rem;
                font-weight: bold;
                letter-spacing: 2rem;
                border-radius: 15rem;
                color: var(--cart_bg_color);
                padding-left: 3rem;
                padding-right: 3rem;
                padding-top: 1rem;
                padding-bottom: 1rem;
                text-align: center;
                width: fit-content;
              }
            }
          }

          .option-item-bot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 88vw;

            .option_list {
              width: calc(84vw);
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-bottom: 5rem;

              div {
                font-size: 12rem;
                width: 13rem;
                height: 13rem;
                font-weight: bold;
                border: 2rem solid #ff0000;
                // letter-spacing: 2rem;
                border-radius: 50%;
                padding-left: 2rem;
                padding-right: 2rem;
                padding-top: 2rem;
                padding-bottom: 2rem;
                // text-align: center;
                // width: fit-content;
              }
            }
          }
        }
      }
    }

    .queren {
      margin-top: 15rem;
      width: 88vw;
      height: 34rem;
      background-color: var(--lr_lcbgc);
      font-size: 16rem;
      font-weight: bold;
      border-radius: 20rem;
      overflow: hidden;
      color: #000000;
      border: none;
    }
  }



  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    align-items: center;
    flex-direction: column;

    .tit_txt {
      .ic {
        i {
          font-size: 20px;

          &:active {
            transition: transform 0.3s ease;
            transform: scale(1.2)
          }
        }

        text-align: center;
        width: 20vw;
        // background-color: #531c1c;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icl {
        // background-color: #b34747;
        text-align: left;
        font-size: 18px;
        font-weight: 400;
        justify-content: flex-start;
      }

      .icr {
        // background-color: #34cc23;
        text-align: right;
        justify-content: flex-end;
      }

      width: 94vw;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .qike_jilu {
    flex-grow: 1;
    width: 94vw;

    .jilu_content {
      margin-top: 10rem;
      width: 94vw;
      height: calc(100% - 73rem);
      border-right: 2rem solid #73524b;
      border-left: 2rem solid #73524b;
    }
  }

  .search_cord {
    height: calc(60vh - 54rem);
    width: 100vw;
    display: flex;
    flex-direction: column;
    margin-bottom: 54rem;

    .tit {
      width: 100vw;
      height: 45rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16rem;
      font-weight: 500;

      .btn {
        width: 46rem;
        font-size: 15rem;
        font-weight: 400;
        color: #455A64;
      }
    }

    .content {
      height: calc(60vh - 99rem);
      width: 100vw;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow: scroll;

      .cord_box {
        &:active {
          background-color: var(--lr_active_bgc);
        }

        width: 100vw;
        height: 40rem;
        min-height: 40rem;
        padding-top: 8rem;
        padding-bottom: 8rem;
        display: flex;
        align-items: center;
        border-bottom: 1rem solid #efefef;

        .box_r {
          height: 36rem;
          width: 36rem;
          border-radius: 50%;
          // background-color: ;
          margin-left: 15rem;
          margin-right: 15rem;
          line-height: 36rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--cart_bg_color);
          color: white;
          font-size: 16rem;
          font-weight: 600;
        }

        .box_m {
          height: 40rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          max-width: calc(100vw - 81rem);

          .m_top {
            height: fit-content;
            text-align: left;
            font-size: 14rem;
            width: calc(100vw - 81rem);
            display: flex;
            justify-content: space-between;
          }

          .m_bot {
            width: calc(100vw - 81rem);
            height: fit-content;
            font-size: 12rem;
            color: #B0BEC5;
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .noborder {
        border: none !important;
      }

      .swcr {
        width: 60rem;
        height: 40rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        padding-top: 8rem;
        padding-bottom: 8rem;
        color: red;
      }
    }
  }
}
</style>
